<template>
  <div class="dataWrap">
    <datamap></datamap>
    <div class="left " :style="{ left : `${leftInfoBox ? '0%' : '-35%'}` }" ></div>
    <div class="right "  :style="{ right : `${rightInfoBox ? '0%' : '-35%'}` }"></div>

    <div class="leftbox_right" v-show="leftInfoBox" @click="boxShowBtn('leftInfoBox')">
      <div class="box_btn_left">
        <span class="el-icon-caret-left lefts" style="left: -15px;"></span>
      </div>
    </div>
    <div class="leftbox_left" v-show="!leftInfoBox" @click="boxShowBtn('leftInfoBox')">
      <div class="box_btn_left">
        <span class="el-icon-caret-right lefts" style="left: -15px;"></span>
      </div>
    </div>
    <div class="rightbox_right" v-show="rightInfoBox" @click="boxShowBtn('rightInfoBox')">
      <div class="box_btn_right">
        <span class="el-icon-caret-right rights" style="right: -15px;"></span>
      </div>
    </div>
    <div class="rightbox_left" v-show="!rightInfoBox" @click="boxShowBtn('rightInfoBox')">
      <div class="box_btn_right">
        <span class="el-icon-caret-left rights" style="right: -15px;"></span>
      </div>
    </div>
  </div>
</template>

<script>
import map from './map_copy.vue'
export default {
    name:'dataView',
    components:{
      datamap:map,
    },
    data(){
        return {
          leftInfoBox:true, // 左侧盒子状态
          rightInfoBox:true,  // 右侧盒子状态
        }
    },
    mounted(){
       
    },
    methods:{
      boxShowBtn(val){
        this[val]=!this[val]
      },
    }

}

</script>

<style scoped lang="less">

.dataWrap {
  width: 100%;
  height: 100%;
  position: relative;
}
.left {
  width: 25%;
  height: 100%;
  position: absolute;
  background: rgba(211, 130, 130, .8);
  z-index: 333;
    // transition: all .2s;

}

.right {
  width: 25%;
  height: 100%;
  position: absolute;
  background:rgba(47, 204, 138, .8);
  z-index: 33; 
    // transition: all .2s;

}


/*箭头*/
.leftbox_right,.leftbox_left,.rightbox_right,.rightbox_left{
  position: absolute;
  top: calc(50% - 26px);
  height: 52px;
  border-left: 12px solid rgb(216, 216, 216);
  border-right: 12px solid transparent;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  cursor: pointer;
  z-index: 201;

}
.rightbox_right,.rightbox_left{
  border-left: 12px solid transparent;
  border-right: 12px solid rgb(216, 216, 216);
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}
.leftbox_right{
  left: 25%;
}
.leftbox_left{
  left: 1px;
}
.rightbox_right{
  right: 25%;
}
.rightbox_left{
  right: 1px;
}
.lefts,.rights{
  font-size: 18px;
  color: #c3c3c3;
  position: absolute;
  top: 5px;
}

/*箭头内嵌套的盒子样式 start*/
.box_btn_left,.box_btn_right{
  height: 50px;
  width: 17px;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  position: absolute;
  top: -11px;
}
.box_btn_left{
  border-left: 11px solid rgb(255, 255, 255);
  border-right: 11px solid transparent;
  left: -12px;
}
.box_btn_right{
  right: -13px;
  border-right: 11px solid rgb(255, 255, 255);
  border-left: 11px solid transparent;
}
/*箭头内嵌套的盒子样式 end*/


</style>